<!DOCTYPE html>
<html lang="en">
    <head>
        <title>用户列表</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="../../static/css/base.css"/>
        <link rel="stylesheet" type="text/css" href="../../static/js/elementUI/index.css"/>
        <link rel="stylesheet" type="text/css" href="../../static/js/elementUI/indexfont.css"/>
        <link rel="stylesheet" type="text/css" href="../../static/js/elementUI/docs.bbc11ec.css"/>
        <script src="../../static/js/lib/require.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../static/js/require-config.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../static/js/activity/modelList.js" type="text/javascript" charset="utf-8"></script>
        <style>
            .bg-purple {
                background: #d3dce6;
            }

            .grid-content {
                border-radius: 4px;
                min-height: 36px;
            }

            .row-bg {
                padding: 10px 0;
                background-color: #f9fafc;
            }

            .el-select .el-input {
                width: 110px;
            }
        </style>
    </head>
    <body>
        <div id="modelList" v-cloak>
            <el-row>
                <el-col :xs="12" :sm="6" :md="4" :lg="3">
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top:10px;">
                <el-col :span="24">
                    <div class="grid-content bg-purple">
                        <template>
                            <el-table :data="tableData" :border="true" style="width:100%" :fit="true">
                                <el-table-column prop="id" show-overflow-tooltip label="主键" width="100"></el-table-column>
                                <el-table-column prop="name" show-overflow-tooltip label="名字" sortable="custom"></el-table-column>
                                <el-table-column prop="version" show-overflow-tooltip label="版本" sortable="custom"></el-table-column>
                                <el-table-column prop="createTime" :formatter="dateFormat" show-overflow-tooltip label="创建时间"></el-table-column>
                                <el-table-column label="操作" show-overflow-tooltip>
                                    <template scope="scope">
                                        <el-button size="small" type="info" @click="handleDeploy(scope.$index, scope.row)">部署</el-button>
                                        <el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-col>
            </el-row>
            <!-- model的添加、编辑对话框窗口 -->
            <el-dialog :title="bmsModelTitle" :visible.sync="bmsModelVisible">
                <el-form :model="model" :rules="modelRule" ref="modelForm">
                    <el-form-item label="模型名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="model.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="模型版本" :label-width="formLabelWidth" prop="version">
                        <el-input v-model="model.version" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="bmsModelVisible = false" v-cloak>取 消</el-button>
                    <el-button type="primary" @click="saveModel" v-cloak>确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </body>
</html>
